<template >
    <!-- 已报箱 -->
    <div class="top">
        <div style="display: flex; height: 100%;">
            <div
                class="block"
                style="
                    width: 20%;
                    height: 97.5%;
                    float: left;
                    background-color: white;
                    border-radius: 10px;
                    box-shadow: 2px 2px 5px gray;
                    overflow: auto;
                "
            >
                <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
                <el-tree class="filter-tree" :data="treeData" :props="defaultProps" :filter-node-method="filterNode" ref="tree" :highlight-current="showTree" @node-click="treenodeClick">
                    <!-- default-expand-all 默认展开-->
                </el-tree>
            </div>
            <div style="width: 80%; height: 100%; float: right; margin-right: 10px">
                <div class="block">
                    <el-image :src="src1" style="height:70px;width:110px" @click="refresh()"></el-image>
                    <el-image :src="add"  style="height:70px;width:110px" @click="newbun('新增部门', '')"></el-image>
                    <el-image :src="src2" style="height:70px;width:110px" @click="getdelect()"></el-image>
                    <div class="block2">
                        <div class="src4">
                            <!-- <el-image :src="src4"></el-image> -->
                            <el-input
                                v-model="select"
                                prefix-icon="el-icon-search"
                                style="width: 360px; border-radius: 4px; border: 1px solid gray"
                                placeholder="请输入内容"
                            ></el-input>
                        </div>
                        <div class="src3">
                            <el-image :src="src3"  style="height:70px;width:110px" @click="top_query()"></el-image>
                        </div>
                    </div>
                </div>
                <div class="tabbox">
                    <el-table
                        ref="multipleTable"
                        :data="tableData"
                        border
                        :header-row-style="{ background: '#005ab5', color: '#ffffff' }"
                        tooltip-effect="dark"
                        style="width: 100%; height: 100%; margin: 0 auto"
                        @selection-change="handleSelectionChange"
                    >
                        <el-table-column type="selection" width="70px" align="center"> </el-table-column>
                        <el-table-column prop="branchName" align="center" label="名称" min-width="21%"> </el-table-column>
                        <el-table-column prop="lordManageName" label="主管" min-width="8%" align="center"> </el-table-column>
                        <el-table-column prop="phone" label="电话" min-width="12%" align="center"> </el-table-column>
                        <el-table-column prop="serNumber" label="排序" min-width="10%" align="center"> </el-table-column>
                        <el-table-column label="操作" min-width="10%" align="center">
                            <template slot-scope="scope">
                                <div class="src5">
                                    <el-image :src="src6"  style="height:40px;width:70px" @click="newbun('修改部门', scope.row.id)"></el-image>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="page_border">
                        <div class="pagenum_sys">
                            <p>第{{ pageData.page }}页&nbsp;&nbsp;每页{{ pageData.pageSize }}条&nbsp;&nbsp;共{{ pageData.total }}条</p>
                        </div>
                        <div class="page_sys">
                            <el-button type="text" @click="toPage(1)">首页</el-button>
                            <el-button type="text" @click="prePage()">上一页</el-button>
                            <el-button type="text" @click="nextPage()">下一页</el-button>
                            <el-button type="text" @click="toPage(-1)">末页</el-button>
                            <el-button type="text" style="color: #333">第</el-button>&nbsp;
                            <el-input style="width: 76px" v-model="input" clearable></el-input>&nbsp;
                            <el-button type="text" style="color: #333">页</el-button>
                            <el-button type="text" @click="toPage(pageNum)">转到</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog id="id_eldiaglog" :title="dialog_title" :visible.sync="dialog" width="80%" height="100%">
            <div id="idvframe">
                <iframe id="idfrom" src="" frameborder="0" width="100%" height="600px"></iframe>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import '../../../common/jdCommon.css';
import system from '@/api/system_setting/dept_manager.js';
export default {
    data() {
        return {
            
            src1: require('../../assets/imgs/imgs/刷新按钮.png'),
            src2: require('../../assets/imgs/imgs/删除按钮.png'),
            src3: require('../../assets/imgs/imgs/查询按钮.png'),
            src4: require('../../assets/imgs/imgs/查询框.png'),
            src5: require('../../assets/imgs/imgs/查看按钮.png'),
            src6: require('../../assets/imgs/imgs/修改按钮.png'),
            add: require('../../assets/imgs/imgs/组 557.png'),
            add_img: require('../../assets/imgs/imgs/添加按钮.png'),
            input: '',
            dialog: false, //弹出框
            tableData: [],
            // 分页
            pageData: {
                page: 1,
                pageSize: 5,
                total: ''
            },
            select: '',
            //目录树开始
            filterText: '',
            treeData: [],
            defaultProps: {
                children: 'dtos',
                label: 'proName'
            },
            dialog_title: '',
            showTree:true,
            //目录树结束
            curDeptId:'',//当前选中的部门ID
            curDeptName:'',//当前选中的部门NAME
        };
    },
    watch: {
        // 根据关键字筛选树
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    created() {
        this.gettable();
        this.gettree();
    },
    methods: {
        // 新增部门弹框
        newbun(stype, id) {
            var that = this;
            if(id == '' && this.curDeptId == ''){
                this.$message.error('请先选择部门');
                return false;
            }
            console.log(id);
            this.dialog = true;
            if ($('#idfrom').attr('src') == undefined) {
                setTimeout(function () {
                    dialogFromSrc(id,that.curDeptId);
                }, 500);
            } else {
                dialogFromSrc(id,that.curDeptId);
            }
            this.dialog_title = stype;
        },
        // 表格请求
        gettable() {
            let param = {
                page: this.pageData.page,
                pageSize: this.pageData.pageSize,
                // branchName:this.select
                branchName:'',
                pid:this.curDeptId
            };
            this.$post('sysManage/branchManage/query', param).then((res) => {
                this.tableData = res.data.rows;
            });
            this.gettree();
        },
        // 树形请求
        gettree() {
             this.$post('sysManage/branchManage/getTree').then((res) => { 
                this.treeData = res.data;
            });
        },
        // 删除请求
        getdelect() {
            let currentSelect = this.$refs.multipleTable.selection;
            currentSelect.forEach((item, index) => {
                this.$post('/sysManage/branchManage/delete/'+item.id).then((res) => { 
                this.$message.success('删除成功!');
            });
            });
            this.gettable();
            this.gettree();
        },
        treenodeClick(data,node,tnode){
            console.log(data)
            this.curDeptId = data.id;
            this.curDeptName = data.proName;
            this.pageData.page = 1;
            this.gettable()
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 筛选节点
        filterNode(value, treeData) {
            if (!value) return true;
            return treeData.proName.indexOf(value) !== -1;
        },
        prePage() {
            // 上一页
            let page = this.pageData.page;
            if (page === 1) return;
            page--;
            this.pageData.page = page;
            this.gettable();
        },
        nextPage() {
            // 下一页
            let total = Math.ceil(this.pageData.total / this.pageData.pageSize);
            let page = this.pageData.page;
            if (page === total) return;
            page++;
            this.pageData.page = page;
            this.gettable();
        },
        toPage(num) {
            // 走一页
            let total = Math.ceil(this.pageData.total / this.pageData.pageSize);

            if (num > total || num === -1) {
                num = total;
            } else if (num < 1) {
                num = 1;
            }
            this.pageData.page = num;
            this.gettable();
        },
        //刷新
        refresh(){
             let param = {
                page: this.pageData.page,
                pageSize: this.pageData.pageSize,
                // branchName:this.select
                branchName:'',
                pid:this.curDeptId
            };
            this.$post('sysManage/branchManage/query', param).then((res) => {
                this.tableData = res.data.rows;
                this.$message.success('刷新成功!');
            });
        },
        //搜索框
        top_query(){
             let param = {
                page: this.pageData.page,
                pageSize: this.pageData.pageSize,
                // branchName:this.curDeptId,
                branchName:this.select,
                pid:this.curDeptId
            };
            this.$post('sysManage/branchManage/query', param).then((res) => {
                this.tableData = res.data.rows;
            });
        },
         changeLayout (type) {
            let $ = this.$
            if (type === 1) {
                $('.right_box').show()
                $('.left-2').css('cssText', 'position: relative;width: 100%;')
            } else if (type === 2) {
                $('.right_box').hide()
                $('.left-2').css('cssText', 'position: absolute;width: 98%;')
            }
        }
    },
     mounted(){
         this.changeLayout(2)
    },
     destroyed() {
        this.changeLayout(1)
    }
};
function dialogFromSrc(id,pid) {
    console.log('src="/?r='+ Math.random() + '/#/dept_input" data-id="' + id + '" data-pid="' + pid +'"');
    $('#idvframe').html(
        '<iframe id="idfrom"  frameborder="0" width="100%" height="600px" src="/?r=' +
            Math.random() +
            '/#/dept_input" data-id="' +
            id + '" data-pid="' + pid +
            '" ></iframe>'
    );
}
</script>

<style scoped>
.src4 {
    margin-top: 3%;
    float: left;
}
.src3 {
    float: right;
}
.src5 {
    margin: 0 auto;
}
#id_eldiaglog .el-dialog__body {
    padding: 0px 20px;
}
/* 修改目录树背景色 开始 */
.el-tree-node:focus > .el-tree-node__content {
    background-color: orange !important;
}
.el-tree-node__content:hover {
    background-color: #66b1ff87;
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background-color: orange;
}
/* 修改目录树背景色 结束 */
/deep/.el-image__inner {
    vertical-align: top;
    margin-top: -6px !important;
}
</style>
